<template>
  <div class="main-content message-wrapper">
    <div class="content-box">
      <div class="top-box">
        <div class="title-box">
          <p class="title">消息中心</p>
        </div>

        <!-- <ul>
          <li
            :class="{ active: item.value === currentType }"
            v-for="item in messageType"
            :key="item.value"
            @click="selectType(item.value)"
          >
            {{ item.label }}
          </li>
        </ul> -->
      </div>

      <ct-table :options="tableOptions">
        <template v-slot:index="scope">
          <el-checkbox :key="scope.row.id" v-model="selectedMessages[scope.row.id]" />
          &nbsp;
          <span>{{ scope.row.index }}</span>
          <div class="buledot"  v-if="!scope.row.isRead"></div>
        </template>
        <template v-slot:content="scope">
          <span
            class="pointer"
            :class="scope.row.isRed === 1 ? 'color-gray' : ''"
            @click="checkMessage(scope.row.id)"
          >
            {{ scope.row.content }}
          </span>
        </template>
      </ct-table>

      <ct-pagination :options="pageOptions" :pageEvent="getListData"></ct-pagination>

      <div class="opratebox">
        <el-button style="float: right; margin-top: -30px;margin-left:10px;" @click="deleteAllMessages">删除全部</el-button>
        <el-button style="float: right; margin-top: -30px;margin-left:10px;" @click="isreadAllfn">全部已读</el-button>
        <el-button style="float: right; margin-top: -30px;margin-left:10px;" @click="isreadfn">标记已读</el-button>
        <el-button style="float: right; margin-top: -30px;margin-left:10px;" @click="deleteSelectedMessages">删除</el-button>
      </div>
    </div>

    <MessageDetail
      v-model:show="showDetail"
      :id="messageId"
      v-if="showDetail"
      @updateList="getListData"
    />
  </div>
</template>

<script setup>
import {
  getMessageList,
  readMessage,
  readAllMessages,
  delAllMessage,
  delMessage,
} from "@/api/index";

const { proxy } = getCurrentInstance();

import CtTable from "@/components/CtTable.vue";
import CtPagination from "@/components/Pagination.vue";
import MessageDetail from "./MessageDetail.vue";

import { usePageOptions } from "@/hooks/usePageOptions";
import { reactive, ref, onMounted } from "vue";
const { pageOptions } = usePageOptions();

let currentType = ref("");
let messageType = ref([]);

function selectType(type) {
  currentType.value = type;
  pageOptions.currentPage = 1;
  getListData();
}

let showDetail = ref(false);
let messageId = ref("");

function checkMessage(id) {
  messageId.value = id;
  showDetail.value = true;
}

let tableOptions = reactive({
  data: [],
  loading: false,
  columns: [
    {
      label: "序号",
      prop: "index",
      width: 150,
      isCustom: true,
    },
    {
      label: "标题",
      prop: "title",
      width: 200,
    },
    {
      label: "创建时间",
      prop: "createdAt",
    },
    {
      label: "内容",
      prop: "content",
      isCustom: true,
    },
  ],
});

let selectedMessages = ref({});

function deleteSelectedMessages() {
  const selectedIds = Object.keys(selectedMessages.value).filter(id => selectedMessages.value[id]);

  if (selectedIds.length > 0) {
    delMessage({ ids: selectedIds }).then(res => {
      selectedIds.forEach(id => {
        delete selectedMessages.value[id];
      });
      getListData();
    });
  }
}

function deleteAllMessages() {
  const selectedIds = Object.keys(selectedMessages.value).filter(id => selectedMessages.value[id]);
  delAllMessage().then(res => {
    if (res.success) {
      selectedIds.forEach(id => {
        delete selectedMessages.value[id];
      });
      getListData();
    }
  });
}

function isreadfn() {
  const selectedIds = Object.keys(selectedMessages.value).filter(id => selectedMessages.value[id]);
  if (selectedIds.length > 0) {
    readMessage({ ids: selectedIds }).then(res => {
      if (res.success) {
        selectedIds.forEach(id => {
          selectedMessages.value[id] = false;
        });
        getListData();
      }
    });
  }
}

function isreadAllfn() {
  const selectedIds = Object.keys(selectedMessages.value).filter(id => selectedMessages.value[id]);
  readAllMessages().then(res => {
    if (res.success) {
      selectedIds.forEach(id => {
        selectedMessages.value[id] = false;
      });
      getListData();
    }
  });
}

function getListData() {
  tableOptions.loading = true;
  const { currentPage, pageSize } = pageOptions;
  selectedMessages.value = {}; // 重置 selectedMessages
  
  getMessageList({
    page: currentPage,
    pageSize,
  })
    .then((res) => {
      const { content, totalElements } = res.data;
      if (content.length) {
        for (let i = 0; i < content.length; i++) {
          content[i].index = proxy.$handleIndex(i, pageOptions);
        }
      }
      tableOptions.data = content;
      tableOptions.loading = false;
      pageOptions.total = totalElements;
    })
    .catch(() => {
      tableOptions.loading = false;
    });
}
setInterval(() => {
  getListData();
}, 2000);

onMounted(() => {
  getListData();
});
</script>

<style lang="scss" scoped>
.message-wrapper {
  .content-box {
    position: relative;
    .opratebox {
      position: absolute;
      bottom: 30px;
    }
    .top-box {
      margin-bottom: 20px;
      .title-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .title {
          font-size: 18px;
        }
      }
    }

    ul {
      display: flex;
      align-items: center;
      margin-top: 15px;

      li {
        margin-right: 15px;
        padding: 8px 16px;
        background-color: #f2f2f2;
        border-radius: 4px;
        user-select: none;

        &:hover {
          cursor: pointer;
        }

        &.active {
          color: #fff;
          background-color: var(--color-primary);
        }
      }
    }
  }
}

.pointer {
  cursor: pointer;
}

.color-gray {
  color: #999;
}
.buledot {
  position: absolute;
  top: 55%;
  right: 25%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%; /* 这里使元素变为圆形 */
  background-color: #ff4d4d;
}
.greendot{
  background-color: rgb(95, 246, 35);
}
</style>
